<template>
  <el-dialog title="关联分类" :visible.sync="visible" width="30%">
    <el-popover placement="right-end" v-model="categorySelectorVisible">
      <category-selector :categoryPath.sync="categoryPath"></category-selector>
      <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="categorySelectorVisible = false">取消</el-button>
        <el-button type="text" icon="el-icon-check" size="mini" @click="addCategoryBrandBind">确定</el-button>
      </div>
      <el-button size="mini" slot="reference" type="primary" icon="el-icon-circle-plus-outline" plain>新增关联</el-button>
    </el-popover>
    <el-table :data="cateRelationTableData" stripe style="width: 100%;margin-top: 10px" height="250">
      <el-table-column prop="brandName" header-align="center" align="center" label="品牌名称"></el-table-column>
      <el-table-column prop="categoryName" header-align="center" align="center" label="分类名称"></el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            icon="el-icon-delete"
            @click="deleteCateRelationHandle(scope.row.id,scope.row.brandId)"
          >移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
        <el-button size="mini" icon="el-icon-circle-close" @click="visible = false">关 闭</el-button>
      </span>
  </el-dialog>
</template>
<script>
import CategorySelector from "@/views/common/categorySelector.vue";
import {categoryBrandList, deleteCategoryBrand, saveCategoryBrand} from "@/api/product/brand";

export default {
  components: {CategorySelector},
  data() {
    return {
      visible: false,
      brandId: '',
      categoryPath: [],
      categorySelectorVisible: false,
      cateRelationTableData: []
    }
  },
  methods: {
    open(brandId) {
      this.brandId = brandId
      this.getCateRelation()
      this.visible = true
    },

    addCategoryBrandBind() {
      this.categorySelectorVisible = false
      let data = {
        brandId: this.brandId,
        categoryId: this.categoryPath[this.categoryPath.length - 1]
      }
      saveCategoryBrand(data).then(res => {
        if (res.success) {
          this.$message.success('已成功绑定')
          this.getCateRelation()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    deleteCateRelationHandle(id) {
      deleteCategoryBrand([id]).then(res => {
        this.getCateRelation()
      })
    },

    getCateRelation() {
      let params = {
        brandId: this.brandId
      }
      categoryBrandList(params).then(res => {
        if (res.success) {
          this.cateRelationTableData = res.data
        }
      })
    },


  }
}
</script>
